<template>
  <div class="ol-detail">
    <!-- 头部要固定 -->
    <div class="ol-tabs">
      <div
        class="item"
        :class="type == 'base' ? 'active' : ''"
        @click="type = 'base'"
      >
        报工信息
      </div>
      <div
        class="item"
        :class="type == 'audit' ? 'active' : ''"
        @click="type = 'audit'"
      >
        审批流程
      </div>
    </div>
    <div v-if="type == 'base'">
      <div class="form-box">
        <formInput label="填报类型" v-model="form.typeName" readonly />
      </div>
      <div class="form-box">
        <formInput
          v-if="form.type == 0"
          label="标题"
          v-model="form.title"
          readonly
        />
        <formInput label="项目" v-model="form.project_name" readonly />
        <formInput label="任务" v-model="form.task_name" readonly />
        <formInput
          v-if="form.type == 1"
          label="计划工时"
          v-model="form.plan_hours"
          readonly
        />
        <formInput
          v-if="form.type == 1"
          label="已投入"
          v-model="form.used_hours"
          readonly
        />
        <formInput label="任务进展" v-model="form.complete_percent" readonly />
        <formInput
          v-if="form.type == 0"
          label="任务类型"
          v-model="form.task_type"
          readonly
        />
      </div>
      <div class="diver-line"></div>
      <div class="form-box">
        <formInput label="工作类型" v-model="form.work_type" readonly />
        <formInput label="工时" v-model="form.standard_hours" readonly />
        <formInput
          label="普通加班"
          v-model="form.common_overtime_hours"
          readonly
        />
        <formInput
          label="法定节假日加班"
          v-model="form.holiday_hours"
          readonly
        />
        <formInput label="出差" v-model="form.other_hours" readonly />
        <formTextarea label="工作报告" v-model="form.work_report" readonly />
        <formTextarea label="备注" v-model="form.comment" readonly />
      </div>
    </div>
    <div v-if="type == 'audit'">
      <olFlow />
    </div>
    <!-- ol-audit -->
    <div class="ol-aduit">
      <transition name="audit">
        <div class="ol-audit-textarea" v-if="showMoreAuditText == true">
          <div
            class="ol-audit-textarea-head"
            @click="showMoreAuditText = false"
          >
            <div class="title">审批意见</div>
            <div><span class="font_family icon-gengduo"></span></div>
          </div>
          <textarea
            class="audit-textarea"
            v-model="auditText"
            placeholder="请填写审批意见"
          />
        </div>
      </transition>
      <div
        class="ol-audit-opera"
        :class="showMoreAuditText == false ? 'show-border' : ''"
      >
        <div class="ol-audit-text" @click="showMoreAuditText = true">
          {{ showMoreAuditText == true ? "" : "审批意见" }}
        </div>
        <div class="ol-audit-nopass" @click="handleAuditNoPass">驳回</div>
        <div class="ol-audit-pass" @click="handleAuditPass">同意</div>
      </div>
    </div>
    <transition name="audit-mask">
      <div class="ol-audit-mask" v-if="showMoreAuditText == true"></div>
    </transition>
    <goback></goback>
  </div>
</template>
<script>
import formInput from "@/components/form-input";
import formTextarea from "@/components/form-textarea";
import olFlow from "@/components/ol-Flow";
import { Toast } from "vant";
import { getReport, approvalReport } from "@/api/ol";
import Goback from '@/components/goback.vue';
export default {
  components: {
    formInput,
    formTextarea,
    olFlow,
    Goback
  },
  data() { 
    return {
      form: {},
      type: "base",
      shouldCheck: false, // 判断是否可以批量操作
      showMoreAuditText: false, // 审批备注
      auditText: "",
    };
  },
  watch:{
    // type(newVal){
    //   if(newVal == 'audit'){
    //     this.processData()
    //   }
    // }
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getReport();
    }
  },
  methods: {
    // 获取报工
    getReport() {
      getReport({
        report_id: this.id,
      }).then((res) => {
        if (res.data.type == 0) {
          res.data.typeName = "计划外";
        } else {
          res.data.typeName = "计划内";
        }
        this.form = res.data;
        console.log(res);
      });
    },
    // 审批通过
    handleAuditPass() {
      approvalReport({
        id: [this.id],
        status: 1,
        comment: this.auditText,
      }).then(() => {
        Toast("审批完成");
        this.showMoreAuditText = false;
        // this.handleSearch();
        this.$router.back();
      });
    },
    // 审批不通过
    handleAuditNoPass() {
      approvalReport({
        id: [this.id],
        status: 0,
        comment: this.auditText,
      }).then(() => {
        Toast("审批完成");
        this.showMoreAuditText = false;
        // this.handleSearch();
        this.$router.back();
      });
    },


    
  },
};
</script>
<style lang="less" scoped>
.ol-detail {
  min-height: 100vh;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  background: #f7f9f9;
  box-sizing: border-box;
  .diver-line {
    height: 7px;
    background: #f7f9f9;
  }
  .form-box {
    background: #fff;
  }
}
// ol-tabs
.ol-tabs {
  display: flex;
  height: 40px;
  margin-bottom: 10px;
  background: #fff;
  .item {
    flex: 1;
    text-align: center;
    line-height: 40px;
    font-size: 13px;
    color: #313541;
    &.active {
      font-size: 14px;
      font-weight: bold;
      position: relative;
      color: #009966;
      &:after {
        position: absolute;
        content: "";
        left: 50%;
        bottom: 0;
        width: 20px;
        height: 1px;
        margin-left: -10px;
        background: #009966;
      }
    }
  }
}
.van-steps {
  background: transparent;
  .van-step--vertical {
    padding-top: 0;
    h3 {
      color: #313541;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 6px;
    }
    time {
      color: #939dad;
      font-size: 12px;
    }
    .van-step__circle-container {
      font-weight: 16px;
    }
    div {
      background: #ffffff;
      padding: 0 16px;
      border-radius: 10px;
      margin-top: 16px;
      h4 {
        color: #313541;
        font-size: 17px;
        font-weight: 600;
        margin: 0;
        padding: 16px 0;
      }
      p {
        color: #313541;
        font-size: 13px;
        padding: 16px 0;
        margin: 0;
        border-top: 1px solid #f2f2f2;
      }
    }
  }
}
// ol-aduit
.ol-aduit {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  border-bottom: 1px solid #f2f2f2;
  z-index: 10;
  .ol-audit-textarea {
    border-top: 1px solid #f2f2f2;
    background: #fff;
    padding: 15px;
    transform-origin: bottom;
    .ol-audit-textarea-head {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 16px;
      }
      span {
        display: inline-block;
        transform: rotate(90deg);
      }
    }
    .audit-textarea {
      margin-top: 10px;
      width: 100%;
      height: 80px;
      border: 0;
      font-size: 14px;
      line-height: 18px;
      color: rgba(49, 53, 65, 1);
    }
  }
  .ol-audit-opera {
    position: relative;
    z-index: 1;
    padding: 0 15px;
    height: 47px;
    display: flex;
    background: #fff;
    &.show-border {
      border-top: 1px solid #f2f2f2;
    }
  }
  .ol-audit-text {
    flex: 1;
    font-size: 13px;
    color: #8f92a1;
    line-height: 47px;
  }
  .ol-audit-nopass {
    margin-top: 7px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    width: 84px;
    background: #fa4e3e;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
    margin-right: 5px;
  }
  .ol-audit-pass {
    margin-top: 7px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    width: 84px;
    background: #009966;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
  }
}
.ol-audit-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: env(safe-area-inset-bottom);
  background: rgba(0, 0, 0, 0.7);
}
</style>